<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sourceMap-view</title>
    <style>
        #app {
            text-align: center;
        }

        .error-msg {
            color: red;
        }

        table.table {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #999999;
            border-collapse: collapse;
            text-align: center;
            margin: 0 auto;
        }

        table.table th,
        table.table td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
        }

        table.table th {
            background: #b5cfd2;
        }

        table.table td {
            background: #dcddc0;
        }

        .mtb-20 {
            margin-bottom: 20px;
        }

        .bt {
            margin: 0 10px;
        }

        input[type=file] {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div id="app">
        <center>
            <h3>sourceMap定位小程序生产错误</h3>
        </center>
        <div class="mtb-20">
            line:column <input type="text" placeholder="11:22" v-model="lineColumn">
        </div>
        <div class="mtb-20">
            sourceMapFile
            <input type="file" ref="file">
            <button class="bt" @click="onClick">确定</button>
            <button class="bt" @click="onClean">清除表格中所有数据</button>
        </div>
        <div class="mtb-20 error-msg" v-show="showError"> {{showError}} </div>
        <div class="mtb-20">
            <table class="table">
                <tr>
                    <th> line:column </th>
                    <th> ==> </th>
                    <th> source </th>
                    <th> line </th>
                    <th> column </th>
                    <th> name </th>
                    <th> 操作 </th>
                </tr>
                <tr v-for="(itemArr, itemArrIndex) in tableList">
                    <td v-for="item in itemArr"> {{item}} </td>
                    <td>
                        <button @click="onDelete(itemArrIndex)">删除</button>
                    </td>
                </tr>
            </table>
        </div>

        <div>
            <a target="_blank" href="./help.html">使用帮助</a>
        </div>
    </div>

    <script src="./js/source-map.js"></script>
    <script src="./js/vue.min.js"></script>
    <script>
        (function () {
            new Vue({
                el: '#app',
                created() {
                    initSourceMap();
                },
                data: {
                    lineColumn: '',
                    showError: '',
                    tableList: []
                },
                methods: {
                    async onClick() {
                        const files = this.$refs.file.files;
                        const splitResult = this.lineColumn.split(':');
                        const [lineString, columnString] = splitResult;
                        if (2 !== splitResult.length) {
                            this.showError = 'line:column框填写错误';
                            return;
                        }
                        if (1 > files.length) {
                            this.showError = '请选择sourceMap文件';
                            return;
                        }
                        this.showError = '';
                        const rawSourceMap = await readFile(files[0]);
                        const result = await parseSourceMap({ rawSourceMap, lineString, columnString });
                        const { line, column, name, source } = result;
                        if (!source || !line || !column || !name) {
                            this.showError = '解析出错了，结果中出现了null。具体解析结果可以到浏览器控制台查看';
                            console.log(result);
                            return;
                        }
                        this.tableList.push([this.lineColumn, '==>', source, line, column, name]);
                    },
                    onDelete(itemArrIndex) {
                        this.tableList.splice(itemArrIndex, 1);
                    },
                    onClean() {
                        this.tableList = [];
                    }
                }
            });

            function readFile(file) {
                return new Promise((resolve, reject) => {
                    const fileReader = new FileReader();
                    fileReader.onloadend = function () {
                        const rawSourceMap = fileReader.result;
                        resolve(rawSourceMap);
                    };
                    fileReader.readAsText(file);
                });
            }

            function initSourceMap() {
                sourceMap.SourceMapConsumer.initialize({
                    "lib/mappings.wasm": "./js/mappings.wasm"
                });
            }
            function parseSourceMap({ rawSourceMap, lineString, columnString }) {
                return new Promise((resolve, reject) => {
                    sourceMap.SourceMapConsumer.with(rawSourceMap, null, consumer => {
                        const result = consumer.originalPositionFor({
                            source: "./",
                            line: +lineString,
                            column: +columnString
                        });
                        resolve(result);
                    });
                });
            }
        })();
    </script>
</body>

</html>